<!-- 我的题库 -->
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { form, params, dictionary, tableKeyList, batchBtnList } from './conf'
import { useCurrentInstance } from '@/common/utils/methods'
import { ResponseType } from '@/common/types/response';
import { TableItemType } from './types'
import questionPreviewDialogVue from './components/questions-bank-preview/index.vue'
import useConditionDialogVue from './components/questions-bank-use-confition/index.vue'
import questionInfoDialogVue from './components/question-bank-Info/index.vue'


const { $confirm, $message, $axios, branchId, brandId } = useCurrentInstance();
const data = reactive({
  getData: false,
  totalNum: 0,
  list: [],
  params,
  previewDialog: false,
})

// 题库预览
const previewDialog = ref();
const preview = (data: TableItemType) => {
  previewDialog.value.showPreviewDialog(data);
}

// 启用、禁用、删除
const questionAction = (status: string, poolIds: string[]) => {
  const actionTips = {
    0: { name: '禁用', tips: '禁用该题库的试卷将同步禁用该题库' },
    1: { name: '启用', tips: '启用后使用该题库的试卷将自动启用' },
    '-1': { name: '删除', tips: '删除后使用该题库的试卷将自动删除' }
  }
  $confirm(`确定${actionTips[status].name}题库吗？<p class="_tip">${actionTips[status].tips}。</p>`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    dangerouslyUseHTMLString: true,
    type: 'warning' 
  }).then(() => {
    $axios.post('/training.exam.api/pool/enableOrDelete', {
      branchId,
      brandId,
      poolIds,
      status
    }).then((res: ResponseType) => {
      if (res.succeed) {
        $message.success('操作成功')
        data.getData = true
      } else {
        $message.error(res.msg || '操作失败')
      }
    }).catch(()=>{
      console.log('取消操作')
    })
  })
}

const useConditionDialog = ref();
const useCondition = (data: TableItemType) => {
  useConditionDialog.value.showConditionDialog(data);
}

const questionInfoDialog = ref();
const showQuestionInfo = (type: string, data?: TableItemType) => {
  questionInfoDialog.value.showQuestionInfoDialog(type, data);
}
</script>

<template>
  <div>
    <ConditionView
      v-model:params="data.params"
      :form="form"
      :dictionary="dictionary"
      @search="data.getData = true"
    ></ConditionView>
    <ListView
      :tableKeyList="tableKeyList"
      :list="data.list"
      :totalNum="data.totalNum"
      :dictionary="dictionary"
      fixed="right"
      :hasHandle="true"
      :batchBtnList="batchBtnList"
    >
      <template #rightBtn>
        <el-button type="primary" @click="showQuestionInfo('add')">
          <el-icon>
            <plus />
          </el-icon>添加题库
        </el-button>
      </template>
      <template #handle="{ row }">
        <el-button-group>
          <el-button @click="preview(row)">预览</el-button>
          <el-button v-if="row.isEnabled == 0" @click="questionAction('1', [row.poolId])">启用</el-button>
          <el-button v-if="row.isEnabled == 1" @click="questionAction('0', [row.poolId])">禁用</el-button>
          <el-button @click="showQuestionInfo('edit', row)">编辑</el-button>
          <el-button :disabled="row.isEnabled === 1" @click="questionAction('-1', [row.poolId])">删除</el-button>
          <el-dropdown size="small" trigger="click">
            <el-button type="primary">更多</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="useCondition(row)">使用情况</el-dropdown-item>
                <el-dropdown-item>题目配置</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
      </template>
    </ListView>
    <Pagination
      url="/training.exam.api/pool/list"
      v-model:list="data.list"
      v-model:getData="data.getData"
      :params="data.params"
      :autoLoad="true"
      @setTotalNum="(num: number) => (data.totalNum = num)"
    ></Pagination>

    <!-- 预览弹窗 -->
    <questionPreviewDialogVue ref="previewDialog" />

    <!-- 使用情况弹窗 -->
    <useConditionDialogVue ref="useConditionDialog" />

    <!-- 添加或编辑题库 -->
    <questionInfoDialogVue ref="questionInfoDialog"/>
  </div>
</template>

<style scoped></style>